<template>
	<div class="header">
		<div class="v-header" v-show="headerState" style="background: rgba(13,24,62,0.6);" ref="vHeader">
			<router-link tag="div" class="logo tab-item" to="/home">
				<img src="./img/logo@3x.png" alt="">
			</router-link>
			<div class="menu-icon" @click="showMenu">
				<img src="./img/nav_menu@3x.png" alt="">
			</div>
		</div>
		<div class="menu" v-show="menuState">
			<div class="header">
				<router-link tag="div" class="logo tab-item" to="/home">
					<img src="./img/logo@3x.png" alt="">
				</router-link>
				<div class="close" @click="hideMenu">
					<img src="./img/nav_menu_close@3x.png" alt="">
				</div>
			</div>
			<div class="con">
				<div class="con-item">
					<router-link class="title" tag="div" to="/home" @click.native="hideMenu"><span>首页</span></router-link>
				</div>
				<div class="con-item">
					<div class="title" @click="showTag1">
						<span>产品</span>
						<img v-if="tagShow1" src="./img/menu_arrow_up@3x.png" alt="">
						<img v-else src="./img/menu_arrow_down@3x.png" alt="">
					</div>
					<ul v-show="tagShow1">
						<router-link tag="li" to="/aiMarketingSystem" @click.native="hideMenu">AI智慧营销系统</router-link>
						<router-link tag="li" to="/bigDataMarketingSystem" @click.native="hideMenu">大数据营销系统</router-link>
					</ul>
				</div>
				<div class="con-item">
					<div class="title" @click="showTag2">
						<span>数据应用</span>
						<img v-if="tagShow2" src="./img/menu_arrow_up@3x.png" alt="">
						<img v-else src="./img/menu_arrow_down@3x.png" alt="">
					</div>
					<ul v-show="tagShow2">
						<router-link tag="li" to="/precisionMarketing" @click.native="hideMenu">精准营销</router-link>
						<router-link tag="li" to="/passengerFlowAnalysis" @click.native="hideMenu">客流分析</router-link>
						<router-link tag="li" to="/userPortrait" @click.native="hideMenu">用户画像</router-link>
					</ul>
				</div>	
				<div class="con-item">
					<div class="title" @click="showTag3">
						<span>行业方案</span>
						<img v-if="tagShow3" src="./img/menu_arrow_up@3x.png" alt="">
						<img v-else src="./img/menu_arrow_down@3x.png" alt="">
					</div>
					<ul v-show="tagShow3">
						<router-link tag="li" to="/wisdomStores" @click.native="hideMenu">智慧门店</router-link>
						<router-link tag="li" to="/vrSharedHall" @click.native="hideMenu">VR共享展厅</router-link>
						<router-link tag="li" to="/unmannedExperienceShop" @click.native="hideMenu">无人体验店</router-link>
					</ul>
				</div>
				<div class="con-item">
					<div class="title" @click="showTag4">
						<span>经典案例</span>
						<img v-if="tagShow4" src="./img/menu_arrow_up@3x.png" alt="">
						<img v-else src="./img/menu_arrow_down@3x.png" alt="">
					</div>
					<ul v-show="tagShow4">
						<router-link tag="li" to="/exgWisdomStores" @click.native="hideMenu">e修鸽智慧门店</router-link>
						<router-link tag="li" to="/bmcVrHall" @click.native="hideMenu">斑马仓VR展示厅</router-link>
					</ul>
				</div>
				<div class="con-item">
					<router-link class="title" tag="div" to="/channelCooperation" @click.native="hideMenu"><span>渠道合作</span></router-link>
				</div>
				<div class="con-item">
					<div class="title" @click="showTag5">
						<span>关于我们</span>
						<img v-if="tagShow5" src="./img/menu_arrow_up@3x.png" alt="">
						<img v-else src="./img/menu_arrow_down@3x.png" alt="">
					</div>
					<ul v-show="tagShow5">
						<router-link tag="li" to="/about" @click.native="hideMenu">关于我们</router-link>
						<router-link tag="li" to="/newsTrends" @click.native="hideMenu">新闻动态</router-link>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default {
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data(){
			return {
				headerState: true,
				menuState: false,
				tagShow1: false,
				tagShow2: false,
				tagShow3: false,
				tagShow4: false,
				tagShow5: false
			}
		},
		computed: {
			
		},
		mounted(){
			
		},
		methods: {
			showMenu(){
				this.menuState = true;
				this.headerState = false;
			},
			hideMenu(){
				this.menuState = false;
				this.headerState = true;
			},
			showTag1(){
				this.tagShow1 = !this.tagShow1;
				this.tagShow5 = false;
				this.tagShow4 = false;
				this.tagShow3 = false;
				this.tagShow2 = false;
			},
			showTag2(){
				this.tagShow2 = !this.tagShow2;
				this.tagShow5 = false;
				this.tagShow4 = false;
				this.tagShow3 = false;
				this.tagShow1 = false;
			},
			showTag3(){
				this.tagShow3 = !this.tagShow3;
				this.tagShow5 = false;
				this.tagShow4 = false;
				this.tagShow2 = false;
				this.tagShow1 = false;
			},
			showTag4(){
				this.tagShow4 = !this.tagShow4;
				this.tagShow5 = false;
				this.tagShow3 = false;
				this.tagShow2 = false;
				this.tagShow1 = false;
			},
			showTag5(){
				this.tagShow5 = !this.tagShow5;
				this.tagShow4 = false;
				this.tagShow3 = false;
				this.tagShow2 = false;
				this.tagShow1 = false;
			},
			vHeaderBgChange(){
				this.$refs.vHeader.style.background = 'rgb(13,24,62)';
			}	
		},
		watch: {
			scrollTop(val){
				if(val > 250){
					this.$refs.vHeader.style.background = 'rgb(13,24,62)';
				}else{
					this.$refs.vHeader.style.background = 'rgba(13,24,62,0.6)';
				}
			}
		},
	}
</script>

<style lang="stylus" scoped>
	.v-header{
		width: 92%;
		height: 1rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		box-sizing: content-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		.logo{
			width: 1.7rem;
			height: 0.33rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.menu-icon{
			width: 0.36rem;
			height: 0.36rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.menu{
		width: 100%;
		background: #0D183E;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		overflow: hidden;
		.header{
			width: 92%;
			height: 1rem;
			padding: 0 4%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: rgba(255,255,255,0.1) solid 1px;
			.logo{
				width: 1.7rem;
				height: 0.33rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.close{
				width: 0.36rem;
				height: 0.36rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.con{
			.con-item{
				.title{
					width: 92%;
					padding: 0 4%;
					height: 1rem;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: rgba(255,255,255,0.1) solid 1px;
					&.router-link-active{
						background: rgb(60,99,170);
					}
					span{
						font-size: 0.3rem;
						color: #FFFFFF;
					}
					img{
						width: 0.36rem;
						height: 0.36rem;
					}
				}
				ul{
					display: flex;
					flex-direction: column;
					li{
						width: 92%;
						padding: 0 4%;
						height: 1rem;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						font-size: 0.3rem;
						color: #FFFFFF;
						background: rgba(60,99,170,0.2);
						border-bottom: rgba(255,255,255,0.1) solid 1px;
						&.router-link-active{
							background: rgb(60,99,170);
						}
					}
				}
			}
		}
	}
</style>

